<template>
  <div class="goodsDetail">
    <div class="goodsTitle">
      <p>商品详情</p>
    </div>
    <div class="goodsInfo">
      <a-row :gutter="20">
        <a-col :span="8">
          <div class="goodsPic"></div>
        </a-col>
        <a-col :span="16">
          <p class="first p-flex">
						<span>{{goodsDetail.name}}（
							<span>{{goodsDetail.buyingThreshold}}</span>T起
							<span>{{goodsDetail.discount}}</span>
							折）</span>
            <span class="first-num">
							<span>{{goodsDetail.computeOriginalPrice}}</span> USDT
						</span>
          </p>
          <p class="second p-flex">
            <span>电费</span>
            <span>
							<span>{{goodsDetail.electricityPrice}}</span>
							USDT/KW-H
						</span>
          </p>
          <p class="third p-flex">
            <span>支付币种</span>
            <span>USDT</span>
          </p>
          <p class="third p-flex">
            <span>请选择购买数量</span>
            <a-input-number v-model="buyNum" :min="goodsDetail.buyingThreshold"/>
          </p>
        </a-col>
      </a-row>
      <div class="goodBox">
        <a-row :gutter="100">
          <a-col :span="12">
            <p class="p-flex">
              <span>预估日收益</span>
              <span class="span-weight">{{goodsDetail.income}} FIL/T</span>
            </p>
          </a-col>
          <a-col :span="12">
            <p class="p-flex">
              <span>合约周期</span>
              <span class="span-weight">{{goodsDetail.contractPeriod}} 天</span>
            </p>
          </a-col>
          <a-col :span="12">
            <p class="p-flex">
              <span>服务费</span>
              <span class="span-weight">{{goodsDetail.servicePrice}} %</span>
            </p>
          </a-col>
          <a-col :span="12">
            <p class="p-flex">
              <span>开始购买时间</span>
              <span class="span-weight">{{goodsDetail.saleStartTime}}</span>
            </p>
          </a-col>
          <a-col :span="12">
            <p class="p-flex">
              <span>结束购买时间</span>
              <span class="span-weight">{{goodsDetail.saleEndTime}}</span>
            </p>
          </a-col>
          <a-col :span="12">
            <p class="p-flex">
              <span>结算周期</span>
              <span class="span-weight">{{goodsDetail.startWorkDays}} 天</span>
            </p>
          </a-col>
        </a-row>
      </div>
    </div>
    <p class="artic-title artic-title1">产品介绍</p>
    <div class="article">
      <p>
        “星河鲸鱼商城Filecoin满存算力”产品是星河鲸鱼商城推出的Filecoin硬件租赁及软件管理服务业务，旨在为用户提供安全、透明、可靠、便捷的渠道参与IPFS挖矿，共同缔造Filecoin经济。本合约不涉及实物交割，收益以Filecoin的形式派发。
      </p>
      <br/>
      <p>
        1、Filecoin满存算力租赁产品无需质押，无封装期。按照Filecoin官方规则，目前每日挖矿产出的25%立即释放、75%分180天线性释放（即每日释放1/180）。
      </p>
      <p>
        2、本产品起售量为{{goodsDetail.buyingThreshold}}T，欲购买的用户可添加星河鲸鱼商城官⽅微信（微信号： ）。
      </p>
      <p>
        3、“星河鲸鱼商城Filecoin满存算力”产品默认合约期限为{{goodsDetail.contractPeriod}}天+{{goodsDetail.contractPeriod}}天+180天，到期即止。
      </p>
      <p>
        4、销售时间：按期售卖，本期统一销售期限为{{goodsDetail.saleStartText}} - {{goodsDetail.saleEndText}}（北京时间）。
      </p>
      <p>
        5、结算说明：当期算力销售结束后第二日（T+1，即{{goodsDetail.workStartText}}）开始计算算力，第三日（T+2，即{{goodsDetail.profitStartText}}）为第一次结算收益。
      </p>
      <p>
        6、分配详情：第一阶段收益分配时间为{{goodsDetail.profitStartText}}，即当日派发{{goodsDetail.workStartText}}结算的收益，之后以此类推按日分配，直至{{goodsDetail.profitOneEndT1Text}}（第{{goodsDetail.contractPeriod
        + 1}}天）分配前一天即{{goodsDetail.profitOneEndText}}（第540天）当天收益为止；
        第二阶段收益分配时间为{{goodsDetail.profitTwoStartText}}（第{{goodsDetail.contractPeriod + 180 +
        1}}天），一次分配第{{goodsDetail.contractPeriod + 1}}天至{{goodsDetail.contractPeriod +
        180}}天（共180天）的累计线性解锁收益。如主网发放规则改变，则按更改后主网规则释放。
      </p>
      <p>
        7、技术服务费：星河鲸鱼商城对{{goodsDetail.contractPeriod}}天+180天正常合约期内的产出收取技术服务费（{{goodsDetail.servicePrice}}%）。技术服务费率为单日总收益的{{goodsDetail.servicePrice}}%，以Filecoin为单位，从当日产出中抵扣，涵盖：IDC机房运维费用、矿机部署及维护、技术服务、人力成本等费用。
      </p>
    </div>
    <p class="artic-title">购买协议</p>
    <div class="article">
      <h1 style="text-align: center;">《“星河鲸鱼商城Filecoin满存算力”产品销售协议》</h1>
      本《“星河鲸鱼商城Filecoin满存算力”产品销售协议》（“本协议”）由您（以下还简称 “用户” ）和星河鲸鱼商城服务平台（ “我们”、“公司” 或 “星河鲸鱼商城”，与您一起合称 “双方”，分别简称
      “一方”）之间订立。
      <br/>
      本协议载明了您使用我们本协议下提供的服务（“本服务”或“服务”）以及使用我们的网站[xinghejingyu.com]（“本网站”）应遵循的条款和条件。通过点击“同意”（或者对等含义的其他短语），您同意您已阅读、了解并接受本协议包含的所有条款和条件。
      <br/> <br/>
      一、免责声明 <br/>
      1.1 法律声明 <br/>
      在您使用我们提供的服务之前，请您确认您不是来自本服务限制区域（包括但不限于：美国、中国香港地区、巴尔干半岛、白俄罗斯、缅甸、科特迪瓦(象牙海岸)，克里米亚-乌克兰、古巴、刚果民主共和国、伊朗、伊拉克、利比里亚、朝鲜、苏丹、叙利亚、
      委内瑞拉、津巴布韦）的居民，并且请您确认您所在的国家或地区允许您使用我们提供的服务。由于您在您所在的国家/地区使用星河鲸鱼商城提供的服务系违法导致的所有法律风险和责任将完全由您独立承担。 <br/>
      1.2 无法退款 <br/>
      按照协议规定，一旦您购买成功，将不支持更换或退款。 <br/>
      1.3 不可抗力风险声明 <br/>
      星河鲸鱼商城不对以下不可抗力风险所造成的损失负责：不能预见、不能避免或不能克服的客观事件，包括自然灾害如洪水、火山爆发、地震、山崩、火灾、被中国政府部门评定为百年不遇级别以上的风暴和恶劣气候等，政府行为和政府指令，
      城市级别的电网供电事故，以及社会异常事件如战争、罢工、动乱等。 <br/>
      1.4 协议修订 <br/>
      星河鲸鱼商城保留随时自行决定修改本协议条款的权利。您有责任定期查看本协议以了解最新修改。本协议及其修改在星河鲸鱼商城将其公布于星河鲸鱼商城网站之时即刻生效（除非另行规定生效时间），但不具追溯性效力。
      您在本协议及其修改发布后继续使用星河鲸鱼商城提供的服务或星河鲸鱼商城网站即表示您接受并同意该修改。 <br/> <br/>

      二、用户注册 <br/>
      2.1 用户特此向公司作出如下陈述和保证，并且该等陈述和保证将被视为于用户每次使用星河鲸鱼商城的服务时重新作出： <br/>
      （1）如果用户为自然人，用户已年满18周岁并具有完全民事行为能力； <br/>
      （2）如若用户为实体，用户根据其实体所在司法管辖区的法律法规合法设立并有效存在，信誉良好； <br/>
      （3）用户接受并使用星河鲸鱼商城提供的服务在用户的所在国家/地区符合适用法律法规和相关政策，且不违反用户对于任何其他第三方的义务； <br/>
      （4）用户具备使用星河鲸鱼商城提供的服务并履行相关义务所需的权力，并且本协议和相关服务购买订单对用户有效并具有约束力； <br/>
      （5）用户向星河鲸鱼商城购买服务使用的资金来源合法合规。 <br/>
      2.2 对于用户提供的注册数据和信息（“注册信息”），用户同意： <br/>
      （1）提供合法，真实，准确和完整的注册信息； <br/>
      （2）如果已提供的注册信息有任何变化，您将及时通知星河鲸鱼商城。如果您提供的注册信息是非法，不真实，不准确或不完整的，您应承担相应的全部责任和后果； <br/>
      （3）星河鲸鱼商城保留根据您提供的注册信息以及星河鲸鱼商城的合规义务和内部风险控制政策对帐户施加某些限制和/或暂停或终止您使用星河鲸鱼商城服务的权利； <br/>
      （4）除非获得星河鲸鱼商城事先书面同意，否则每位用户只能在星河鲸鱼商城注册一个账户； <br/>
      （5）为KYC（“了解您的客户”）和/或反洗钱等合规目的，星河鲸鱼商城有权要求您提供账户所有者的身份识别信息和/或财务信息； <br/>
      （6）您在使用星河鲸鱼商城提供的服务中的一些特定功能时需要输入您的用户名和密码。如果您因为忘记密码等原因无法访问您的帐户，星河鲸鱼商城为确定帐户真实的所有权，有权要求您提供包括身份识别信息等在内的特定信息，
      包括但不限于：身份证明; 居住证明; 电话号码/电子邮件证明以及网站上的任何可识别活动信息，例如交易ID，订单号，提款金额等。您承诺您不会与其他人分享您的用户名和/或密码或允许任何其他第三方使用您的账户。
      对于您或任何其他第三方对您的账户或密码的不当使用以及所导致的后果和损失，星河鲸鱼商城不承担任何责任。如果您认为您的用户名和/或密码被他人知晓或账户已被他人擅自使用，您应立即通知星河鲸鱼商城。 <br/>
      <br/>

      三、风险通知 <br/>
      3.1 您理解并认可：购买算力以及运行产生的相关服务会涉及风险，本第3.1条列出的风险并非穷尽。这些风险以及现在或将来出现的其他风险可能会使得您无法获得任何收益，遭受财务损失，甚至使得我们提供的服务被终止：
      <br/>
      （1）购买算力以及运行产生的相关服务都会带来潜在的财务、监管和其他风险。您在购买算力以及运行产生的相关服务前应确认您对区块链技术，算力的功能和风险方面具有充分的知识和经验。
      您参与任何购买算力以及运行产生的相关服务的任何决定应基于您认为必要的独立调查和/或获取专业人士的咨询。星河鲸鱼商城默认您在使用本服务时是一名了解本行业并且懂得相关服务风险的专业人士，
      本协议以及星河鲸鱼商城提供的任何服务均不应视为星河鲸鱼商城向您提供建议； <br/>
      （2）任何星河鲸鱼商城提供的算力销售服务套餐（“服务套餐”）的价值都可能因不受星河鲸鱼商城控制的许多因素而受影响，这些因素包括但不限于：算力参数/属性的变化，市场价格波动，硬件过时和硬件摊销等； <br/>
      （3）星河鲸鱼商城会不时对于系统进行维护或升级。您确认您并未期待星河鲸鱼商城提供的服务是连续的，不中断的。除双方另有明确约定，否则星河鲸鱼商城对于其系统的维护和升级而导致的暂停和中断所造成的任何和所有损失，星河鲸鱼商城不承担责任；
      <br/>
      （4）没有一种身份验证，或计算机安全技术是100%安全的。您同意承担黑客入侵或身份盗用相关的所有风险； <br/>
      （5）您了解并同意，星河鲸鱼商城保留通过网站，电子邮件，客户服务电话，手机短信和其他官方渠道发布，修改和/或提供与服务有关的信息的权利。对于通过非星河鲸鱼商城官方渠道获得的信息，星河鲸鱼商城概不负责。
      如果您对以星河鲸鱼商城名义发送的信息的真实性有任何疑问，请立即与我们联系。 <br/>
      3.2
      在购买星河鲸鱼商城提供的任一服务套餐之前，您应判断该服务套餐是否适合您的财务能力和风险偏好。您购买星河鲸鱼商城提供的任一服务套餐，即代表您认可，理解并接受与开采，购买，出售，交换，持有算力相关的全部风险，包括但不限于：
      <br/>
      （1）市场价格大幅波动：价格可能急剧下跌，甚至可能跌至为零；<br/>
      （2）交易可能需要一段时间被确认。虽然可能性较低，但的确存在可能某些交易可能永远无法被确认。未被确认的交易代表该等交易未完成; <br/>
      （3）交易是不可逆转的：如果您向任何错误的人或地址发送任何数量的资金，您将无法撤销交易或收回这些资金; <br/>
      （4）如果您丢失或忘记访问和使用所需的任何PIN或密码，该等资金可能会丢失或无法被您使用; <br/>
      （5）区块链技术可能存在固有的未知技术缺陷； <br/>
      （6）各国家/地区可能会出台和颁布影响使用协议履行的新法律，规定和政策。 <br/> <br/>

      四、套餐费用 <br/>
      4.1 服务套餐的费用（“套餐费用”）包括：算力购买费和技术服务费。 <br/>
      4.2 算力购买费 ：星河鲸鱼商城按照1T起购，3000usdt/T/540天+540天的价格收取算力购买费。 <br/>
      4.3 技术服务费：是指IDC机房运维费用、矿机部署及维护、技术服务、人力成本等费用。技术服务费以540天+540天正常合约期内的产出为基础收取，费率为单日总收益的20%，以Filecoin为单位，从当日产出中抵扣。
      <br/>
      4.4 您理解并同意：星河鲸鱼商城向您收取的具体套餐费用规定于具体的服务套餐页面。您如果不能接受某一服务套餐页面中规定的费用，您不应就该服务套餐向星河鲸鱼商城发出订单。 <br/> <br/>

      五、服务 <br/>
      5.1 星河鲸鱼商城为连接用户和节点的“桥梁”。通过星河鲸鱼商城提供的服务，用户能够从星河鲸鱼商城购买算力并获得相应的收益。 <br/>
      5.2 用户购买的算力来自星河鲸鱼商城属下的特定节点，该节点提供的服务可能涉及的费用已涵盖在4.3的技术服务费中。 <br/>
      5.3 用户购买的服务套餐对应的算力挖掘而得的收益将自动发放到用户订购产品时所用的星河鲸鱼账户中，用户不能另行指定钱包地址用于接收。 <br/>
      5.4
      本协议服务产出以Filecoin的形式发放。按照Filecoin官方规则，目前每日挖矿产出的25%立即释放、75%分180天线性释放（即每日释放1/180）。星河鲸鱼商城完全按照官方释放标准执行，如官方规则有更新，星河鲸鱼商城会及时更新释放规则。
      按照当前Filecoin官方释放规则，本合约周期为540天+540天，而产出完全释放为540+540+180天，如因主网发放规则改变，则按更改后主网规则释放，最终以IPFS项目方规则为准。具体收益分配安排参考“产品详情页面”。
      <br/>
      5.5
      您理解并认可：星河鲸鱼商城不会对您的未来收益做出任何承诺，星河鲸鱼商城网站或星河鲸鱼商城活动页面上提到的任何与未来有关的收益或收益率(或回报率)数据均为预计和假设。您实际的收益金额会受到Filecoin全网24h平均挖矿收益的影响。
      <br/> <br/>

      六、订单的付款、取消、更改及退款 <br/>
      6.1 用户可以使用星河鲸鱼商城支持的各种付款方式购买服务套餐。 <br/>
      6.2 用户对付款的准确性负全部责任，包括但不限于：目的地帐户地址(钱包地址)、转账金额和其他付款细节；由于用户错误（例如将资金转到错误的地址）导致的错误付款所产生的任何损失均应由用户自行承担，
      并且星河鲸鱼商城有权在为用户激活任何服务套餐之前要求用户正确付款。 <br/>
      6.3 如果星河鲸鱼商城实际收到的金额低于星河鲸鱼商城要求的套餐费用，星河鲸鱼商城保留在激活对应服务套餐之前自行决定下列事项的权利： <br/>
      （1）相应地调整该服务套餐使得星河鲸鱼商城实际收到的资金和星河鲸鱼商城提供的服务套餐内容相匹配； <br/>
      （2）拒绝激活用户下单的服务套餐直到用户支付完毕所欠款项。 <br/>
      6.4 由于资金确认时间以及第三方延迟等原因，用户转账给星河鲸鱼商城的金额可能存在延迟到账的风险。用户同意星河鲸鱼商城有权在确认足额到账后再激活对应的服务套餐。 <br/>
      6.5 在法律法规允许的最大范围下，用户认可：除非另有明确书面约定，否则所有购买的服务套餐均为最终购买且不可更换和退款。星河鲸鱼商城保留自行决定退款的权利：如果星河鲸鱼商城对个别用户或特定的服务套餐决定提供退款，
      不代表星河鲸鱼商城有义务在将来同意相同或类似的退款。此退款政策不影响任何可能适用的法定权利。 <br/>
      6.6 受限于本协议其他条款的约定，如果星河鲸鱼商城根据本协议或适用法律法规提供退款，由此产生的任何附加费用（如第三方手续费）须完全由用户自行承担。 <br/> <br/>

      七、限制和义务 <br/>
      7.1 您不得利用星河鲸鱼商城提供的服务从事任何违法活动。您不得利用星河鲸鱼商城提供的服务： <br/>
      （1）支持，煽动或参与任何恐怖主义活动； <br/>
      （2）参与任何洗钱活动； <br/>
      （3）捏造或歪曲事实，散布谣言，扰乱社会秩序; <br/>
      （4）宣传或制作淫秽色情，暴力及/或恐怖内容； <br/>
      （5）参与任何其他违反适用法律法规的活动。 <br/>
      7.2 用户不得将星河鲸鱼商城提供的算力用于攻击网络等违法违规行为，否则星河鲸鱼商城有权强行收回您的算力。 <br/>
      7.3 您同意遵守所有适用法律法规，本协议以及星河鲸鱼商城不时宣布的与使用星河鲸鱼商城网站和星河鲸鱼商城提供的服务相关的所有规则和政策。 <br/>
      7.4 您同意并承诺您仅仅在为自己的利益使用星河鲸鱼商城提供的服务，您并未代他人或为了其他第三方的利益而使用星河鲸鱼商城提供的服务。 <br/>
      7.5 您同意在您发现或怀疑任何第三方使用星河鲸鱼商城提供的服务存在任何欺诈或不当行为时立即与星河鲸鱼商城联系。 <br/>
      7.6 除非星河鲸鱼商城事先明确书面同意，否则您不得以任何方式在星河鲸鱼商城网站注册多个帐户。您不得通过注册多个帐户以获取利润，奖励或优惠券。 <br/>
      7.7 您不应参与任何可能影响星河鲸鱼商城提供的服务及/或星河鲸鱼商城网站安全的活动。 <br/>
      7.8 您不得使用任何方法来屏蔽您的互联网流量和IP地址（例如Proxy，Tor，VPN等）或使用其他隐藏用户真实互联网连接的技术服务。 <br/>
      7.9 在星河鲸鱼商城网站上展示的任何内容的知识产权，包括但不限于文章，图片，新闻，材料，网站结构，网站布置，网站设计，除非特别说明，均由星河鲸鱼商城或星河鲸鱼商城的许可人（如有）完全拥有。
      用户应尊重星河鲸鱼商城以及 星河鲸鱼商城的许可人（如有）的知识产权。 <br/>
      7.10 未经星河鲸鱼商城事先书面授权，用户不得以星河鲸鱼商城的名义进行任何活动和使用星河鲸鱼商城网站信息/数据。 <br/>
      7.11 您在此承诺并保证您使用星河鲸鱼商城提供的服务不会对星河鲸鱼商城声誉造成负面影响或使得星河鲸鱼商城承担法律责任或其他处罚，罚款及制裁。 <br/>
      7.12 您同意您应完全承担通过使用星河鲸鱼商城提供的服务而产生的相关税收义务。 <br/>
      7.13 如果用户违反本第8条的规定，星河鲸鱼商城有权立即暂停或终止向用户提供服务，并有权在适用法律法规允许的范围内采取一切必要的法律手段。 <br/> <br/>

      八、保密协议 <br/>
      8.1 双方保证对在洽谈、签订、执行本协议及本项目合作过程中所获悉的属于相对方的且无法自公开渠道获得的保密信息（包括但不限于文件、资料及信息、公司计划、运营活动、财务信息、技术信息、经营信息、相关材料等）予以保密。
      未经对方书面同意，任何一方不得以任何方式利用或向任何第三方泄露属于对方的上述文件、资料及信息的全部或部分内容。 <br/>
      8.2 任何一方若违反上述保密义务，应赔偿对方因此而遭受的一切经济损失。 <br/>
      8.3 保密条款长期有效，本协议终止后双方仍受约束。 <br/> <br/>

      九、违约责任 <br/>
      9.1 对于用户任何违反本协议的行为（包括但不限于：用户未及时支付套餐费用，用户使用星河鲸鱼商城提供的服务在用户所在国家/地区系非法等），
      星河鲸鱼商城有权立即暂停或终止为用户提供服务并在适用法律法规允许的范围内采取一切必要的法律手段，包括但不限于要求用户赔偿星河鲸鱼商城受到的相关损失。 <br/>
      9.2 如果星河鲸鱼商城合理怀疑用户以违法，欺诈或其他不正当方式使用星河鲸鱼商城提供的服务，星河鲸鱼商城有权暂停向用户提供服务，直到用户能够提供符合星河鲸鱼商城要求的合规证明。 <br/> <br/>

      十、责任限制 <br/>
      10.1
      您同意并接受：在与本协议规定的任何其他补偿或赔偿权利不重复的前提下，您应向公司赔偿您违反本协议导致的任何损失、责任、索赔、指控、行动、诉讼或费用（统称“损失”，包括合理的律师费），并就此向公司提供辩护，保证公司不因此遭受该等损害。
      在任何情况下，公司，及其关联方或其各自的高级管理人员，董事，代理人，雇员或代表均不对您或任何第三方承担任何与本协议有关的特殊，偶然，间接或结果性的损害或利润损失。 <br/>
      10.2 用户同意：星河鲸鱼商城在本协议下对用户的全部责任不超过该用户向星河鲸鱼商城支付的全部套餐费用。 <br/> <br/>

      十一、其他约定 <br/>
      11.1 弃权：公司对本协议项下用户的任何违约行为延迟行使或者疏于行使公司的任何权利或救济，不应解释为公司豁免或者默许任何该等违约行为。 <br/>
      11.2 可分割性：若本协议的任何条款被认定不合法或者不可执行，则该认定应不影响本协议的其余条款。 <br/>
      11.3 适用法律：本协议应全面适用英属维尔京群岛法律，但不考虑其法律冲突原则。 <br/>
      11.4 争议解决：如果各方在本协议履行过程中发生任何争议, 如协商不成，任何一方有权提交由香港国际仲裁中心仲裁，并按照提交仲裁时有效的《香港国际仲裁中心仲裁规则》最终解决。
      仲裁裁决是终局的，对双方均具有约束力。除非仲裁裁决另行裁定，仲裁费应由败诉一方负担。败诉方还应补偿胜诉方的律师费等支出。 <br/> <br/> <br/> <br/>

    </div>
    <div class="foot-buy" style="display: flex;justify-content: space-around">
      <div>
        <p>{{goodsDetail.name}}（
          <span>{{goodsDetail.buyingThreshold}}</span>T起
          <span>{{goodsDetail.discount}}</span>
          折） ×
          {{buyNum}}
          T
          <span>（当前可用算力券{{card}} T）</span>
        </p>
        <p class="p-weight">
						<span
              style="color: rgb(199 188 188);margin-right:5px;text-decoration: line-through;font-weight: 200"
              v-if="card > 0 ? true : false">
							{{buyNum}} T
						</span>
          {{(card > buyNum) ? 0 : buyNum - card}} T
          *
          {{goodsDetail.computeOriginalPrice }} USDT
          *
          {{goodsDetail.discount}} %
          =
          {{goodsDetail.computeRealPrice * ((card > buyNum) ? 0 : buyNum - card)}}
          USDT
        </p>
      </div>
      <div>
        <p style="position: relative;top: 10px">
          <span>共计</span>
          <span class="p-weight" style="margin: 0px 10px">
							{{goodsDetail.computeRealPrice * ((card > buyNum) ? 0 : buyNum - card)}}
							USDT</span>
          <span>
							<a-button class="submit-btn" @click="submitOrder" :loading="loading">提交订单</a-button>
						</span>
        </p>
      </div>
    </div>
  </div>

</template>

<script>
  import moment from 'moment'

  import {
    getComputingPowerId,
    buyComputingPower,
    getAccountDetail
  } from '../serves/index'
  import {
    eventBus
  } from '@/eventBus';
  import {
    getLocalStorage
  } from "../serves/localStorage"

  export default {
    name: "goodsDetail",
    data() {
      return {
        buyNum: 0,
        goodsDetail: {},
        card: '',
        loading: false
      }
    },
    mounted() {
      if (getLocalStorage('accessToken')) {
        this.getCard()
      }
      this.getComputerList()
    },
    methods: {
      getCard() {
        getAccountDetail().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.card = res.data.data.card
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      getComputerList() {
        let params = {
          id: this.$route.query.id
        }
        getComputingPowerId(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.goodsDetail = res.data.data
            this.buyNum = this.goodsDetail.buyingThreshold
            this.goodsDetail['saleStartText'] = moment(this.goodsDetail.saleStartTime).format('YYYY-MM-DD 12:00:00')
            this.goodsDetail['saleEndText'] = moment(this.goodsDetail.saleEndTime).format('YYYY-MM-DD 12:00:00')
            this.goodsDetail['workStartText'] = moment(this.goodsDetail.workStartTime).format('YYYY年MM月DD日')
            this.goodsDetail['profitStartText'] = moment(
              new Date(this.goodsDetail.workStartTime).getTime() + 24 * 60 * 60 * 1000
            ).format('YYYY年MM月DD日')
            this.goodsDetail['profitOneEndT1Text'] = moment(
              new Date(this.goodsDetail.workStartTime).getTime() + (this.goodsDetail.contractPeriod + 1) * 24 * 60 * 60 * 1000
            ).format('YYYY年MM月DD日')
            this.goodsDetail['profitOneEndText'] = moment(
              new Date(this.goodsDetail.workStartTime).getTime() + this.goodsDetail.contractPeriod * 24 * 60 * 60 * 1000
            ).format('YYYY年MM月DD日')
            this.goodsDetail['profitTwoStartText'] = moment(
              new Date(this.goodsDetail.workStartTime).getTime() + (this.goodsDetail.contractPeriod + 180 + 1) * 24 * 60 * 60 * 1000
            ).format('YYYY年MM月DD日')
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      submitOrder() {
        let params = {
          powerId: this.goodsDetail.id,
          power: this.buyNum,
          card: this.card,
        }
        if (getLocalStorage('accessToken')) {
          if (this.card > this.buyNum) {
            this.$message.success(`算力券抵扣${this.buyNum} T,待支付0 T`)
          } else {
            this.$message.warning(`算力券抵扣${this.card} T,待支付${this.buyNum - this.card} T`)
          }
        }
        this.loading = true
        buyComputingPower(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.loading = false
            this.$message.success('订单提交成功！')
            this.$router.push('personCenter')
            window.scrollTo(0, 0);
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push('login')
            eventBus.$emit('isShow', false);
          } else {
            if (res.data.message == '账户余额不足') {
              this.$message.warning('账户余额不足，请先充值')
              this.$router.push('personCenter')
              window.scrollTo(0, 0);
            } else {
              this.$message.warning(res.data.message)
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .goodsDetail {
    position: relative;

    .goodsTitle {
      text-align: left;
      color: #fff;
      font-weight: 700;
      font-size: 24px;
      height: 400px;
      background: #5F35E0;
      padding: 50px 300px;
    }

    .goodsInfo {
      margin: 50px 300px;
      padding: 40px 30px;
      background: #fff;
      position: absolute;
      top: 120px;
      box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
      z-index: 10;

      .goodsPic {
        width: 200px;
        height: 250px;
        background-color: #F6F8FF
      }

      .p-flex {
        display: flex;
        padding: 10px 0px;
        justify-content: space-between
      }

      .first {
        > span:nth-child(1) {
          font-weight: 700;
          font-size: 18px;
        }

        .first-num {
          span {
            color: #FB3353;
            font-size: 18px;
            font-weight: 700
          }
        }
      }

      .second {
        > span:nth-child(2) {
          font-weight: 700;
        }
      }

      .third {
        > span:nth-child(2) {
          font-weight: 700;
          color: #380CF4;
        }
      }
    }

    .goodBox {
      margin-top: 20px;

      p {
        padding: 10px 20px !important;
        background-color: #F6F8FF;
      }

      .span-weight {
        font-weight: 700;
      }
    }

    .artic-title {
      margin: 50px 300px;
      text-align: left;
      font-size: 24px;
      font-weight: 700;
    }

    .artic-title1 {
      margin-top: 350px;
    }

    .article {
      margin: 50px 300px;
      padding: 30px 50px;
      box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
      text-align: left;

      h1 {
        text-align: center;
      }
    }

    .foot-buy {
      padding-top: 20px;
      background-color: rgba(95, 53, 224, 0.8);
      position: fixed;
      z-index: 10;
      width: 100%;
      bottom: 0;

      p {
        color: #fff;
        font-size: 18px;
      }

      .p-weight {
        font-weight: 700;
      }

      .submit-btn {
        border-radius: 20px;
        border: none;
        color: #fff;
        font-weight: 700;
        background: linear-gradient(to right, rgba(250, 46, 26, 1) 0%, rgba(253, 96, 52, 1) 100%);
      }
    }
  }

  @media screen and (max-width: 800px) {
    .goodsDetail {
      position: relative;

      .goodsTitle {
        text-align: left;
        color: #fff;
        font-weight: 700;
        font-size: 24px;
        height: 50px;
        background: #5F35E0;
        padding: 10px;
      }

      .goodsInfo {
        margin: 0px;
        padding: 10px;
        position: relative;
        top: -60px;

        .goodsPic {
          width: 100px;
          height: 150px;
          background-color: #F6F8FF
        }

        .p-flex {
          display: flex;
          padding: 10px 0px;
          justify-content: space-between
        }

        .first {
          > span:nth-child(1) {
            font-weight: 700;
            font-size: 12px;
          }

          .first-num {
            font-size: 12px;

            span {
              font-size: 12px;
            }
          }
        }

        .second {
          > span:nth-child(2) {
            font-weight: 700;
          }
        }

        .third {
          > span:nth-child(2) {
            font-weight: 700;
            color: #380CF4;
          }
        }
      }

      .goodBox {
        margin-top: 20px;

        .ant-row {
          margin: 0px !important;

          .ant-col {
            padding: 5px !important;
          }
        }

        p {
          padding: 10px 20px !important;
          background-color: #F6F8FF;
        }

        .span-weight {
          font-weight: 700;
        }
      }

      .artic-title {
        margin: 10px;
        text-align: left;
        font-size: 24px;
        font-weight: 700;
      }

      .artic-title1 {
        margin-top: 0px;
      }

      .article {
        margin: 10px;
        padding: 10px;
        box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
        text-align: left;
      }

      .foot-buy {
        padding: 30px 0px;

        p {
          font-size: 12px;
        }
      }
    }
  }
</style>
